<template>
    <Panel   shadow :padding="10">
      <el-table
        :data="coupon"
        style="width: 100%">
        <el-table-column
          label="课程ID"
          prop="course"          >
        </el-table-column>
        <el-table-column
          label="结束时间"
          prop="end_time"          >
          <template slot-scope="scope">
            <p>{{scope.row.end_time | localtime('YYYY-M-D HH:mm')}}</p>
          </template>>
        </el-table-column>
        <el-table-column
          label="优惠码"
          prop="code">
        </el-table-column>
        <el-table-column
          label="剩余量"
          prop="number">
        </el-table-column>
        <el-table-column
          label="金额"
          prop="price">
        </el-table-column>
        <el-table-column
          label="优惠类型"
          prop="type"          >
          <template slot-scope="scope">
            <p v-if="scope.row.type==false">金额优惠</p>
            <p v-if="scope.row.type==true">折扣优惠</p>
          </template>
        </el-table-column>
        <el-table-column
          label="使用范围"
          prop="width">
          <template slot-scope="scope">
            <p v-if="scope.row.width=='One'">单章节可用</p>
            <p v-if="scope.row.width=='All'">整个课程可用</p>
            <p v-if="scope.row.width=='Rest'">剩余全部章节可用</p>
          </template>
        </el-table-column>
        <el-table-column
          label="描述"
          prop="des"          >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑优惠券" :visible.sync="editing" :close-on-click-modal = "false">
        <el-form :inline="true"  ref="form" :model="editcoupon">
          <el-form-item label="课程">
            <el-input  v-model="editcoupon.course_id"></el-input>
          </el-form-item>
          <el-form-item label="使用截止时间">
            <el-date-picker type="datetime" v-model="editcoupon.end_time" ></el-date-picker>
          </el-form-item>
          <el-form-item label="优惠码">
            <el-input v-model="editcoupon.code" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="剩余数量">
            <el-input v-model="editcoupon.number"></el-input>
          </el-form-item>
          <el-form-item label="优惠类型">
            <el-select v-model="editcoupon.type" placeholder="请选择优惠类型">
              <el-option label="金额优惠" value=false></el-option>
              <el-option label="折扣优惠" value=true></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额">
            <el-input v-model="editcoupon.price"></el-input>
          </el-form-item>
          <el-form-item label="使用范围">
            <el-select v-model="editcoupon.width" placeholder="请选择使用范围">
              <el-option label="单章节可用" value="One"></el-option>
              <el-option label="整个课程可用" value="All"></el-option>
              <el-option label="剩余全部章节可用" value="Rest"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input type="textarea" v-model="editcoupon.des"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="!adding" type="primary" @click="onSubmit">更新</el-button>
            <el-button v-if="adding" type="primary" @click="onSubmit">新增</el-button>
          </el-form-item>
        </el-form>
      </el-dialog >
      <el-button style="margin-top:20px" type="primary" @click="addCoupon">
        新增
      </el-button>
    </Panel>
  </template>
  <script>
    import api from '../../api.js'

    export default {
      name: 'coupon',
      data () {
        return {
          coupon: [],
          editcoupon: {},
          editing: false,
          adding: false
        }
      },
      mounted () {
        this.getCouponList()
      },
      methods: {
        getCouponList () {
          api['getCoupon']().then((res) => {
            this.coupon = res.data.data
          }).catch()
        },
        handleEdit (index, row) {
          this.editing = true
          this.editcoupon['id'] = this.coupon[index].id
          this.editcoupon['course_id'] = this.coupon[index].course
          this.editcoupon['end_time'] = this.coupon[index].end_time
          this.editcoupon['code'] = this.coupon[index].code
          this.editcoupon['number'] = this.coupon[index].number
          this.editcoupon['price'] = this.coupon[index].price
          this.editcoupon['type'] = this.coupon[index].type
          this.editcoupon['width'] = this.coupon[index].width
          this.editcoupon['des'] = this.coupon[index].des
          this.editcoupon = JSON.parse(JSON.stringify(this.editcoupon))
          console.log(index, row.title)
        },
        onSubmit () {
          let params = this.editcoupon
          console.log('par', params)
          if (!this.adding) {
            api['editCoupon'](params).then((res) => {
              this.editing = false
              this.adding = false
              this.getCouponList()
            }).catch()
          } else {
            api['addCoupon'](params).then((res) => {
              this.editing = false
              this.adding = false
              this.getCouponList()
            }).catch()
          }
        },
        addCoupon () {
          this.editing = true
          this.adding = true
        }
      }
    }
  </script>
  
  <style scoped lang="less">
  </style>
  